<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            text-align: center;
        }
        #mcanvas {
            border: 1px solid #eee;
        }
    </style>
</head>
<body>
    <script>
        window.onload = function() {
            var jsCanvas = document.getElementById('mcanvas')
            var ctx = jsCanvas.getContext('2d')

            // 画线
            // ctx.moveTo(10, 10)
            // ctx.lineTo(400, 40)
            // ctx.lineWidth = 10
            // ctx.strokeStyle = '#cd2828'
            // ctx.lineCap = 'butt'
            // // ctx.lineCap = 'round'
            // // ctx.lineCap = 'square'
            // ctx.stroke()

            // // 每次调用 beginPath() 都会重新开始一个新线段的绘制; 如果没有这一步, 那么每次调用 stroke(), 都会把画布上的原有线段再重新绘制一遍
            // ctx.beginPath()
            // ctx.moveTo(10, 120)
            // ctx.lineTo(400, 120)
            // ctx.lineCap = 'round'
            // ctx.stroke()


            // 红心三角
            // 1. 最好先绘制填充轮廓, 然后再绘制其轮廓, 否则形状轮廓线会有一部分被填充色覆盖掉
            // 2. closePath() 会自动关闭路径, 并且在最后一个绘制点和绘制起点之间绘制一条线
            // ctx.beginPath()
            // ctx.moveTo(250, 50)
            // ctx.lineTo(50, 250)
            // ctx.lineTo(450, 250)
            // ctx.lineTo(250, 50)
            // ctx.closePath()
            // ctx.fillStyle = 'blue'
            // ctx.fill()
            // ctx.lineWidth = 10
            // ctx.strokeStyle = 'red'
            // // ctx.lineJoin = 'mitre'
            // ctx.lineJoin = 'round'
            // // ctx.lineJoin = 'bevel'
            // ctx.stroke()

            // ctx.beginPath()
            // // ctx.fillRect(0, 10, 30, 40)
            // ctx.strokeRect(0, 10, 30, 40)

            // 画圆
            // var x = 150
            // var y = 300
            // var radius = 100
            // var startingAngle = 1.25 * Math.PI
            // var endingAngle = 1.75 * Math.PI
            // ctx.arc(x, y, radius, startingAngle, endingAngle)
            // ctx.stroke()


            // 正方形, 变换, translate, scale, rotate, matrix
            // 可以在变换之前调用 save() 保存坐标系状态; 然后再调用 restore() 恢复
            // ctx.rect(0, 0, 30, 30)
            // ctx.rect(50, 50, 30, 30)
            // ctx.rect(100, 100, 30, 30)
            // ctx.stroke()
            // 等价于
            ctx.rect(0, 0, 30, 30)
            ctx.translate(50, 50)
            ctx.rect(0, 0, 30, 30)
            ctx.translate(50, 50)
            ctx.rect(0, 0, 30, 30)
            ctx.stroke()
        }
    </script>
    <div class="wrap">
        <canvas id="mcanvas" width="600" height="400"></canvas>
    </div>
</body>
</html>